// -----App.js
import logo from './logo.svg';
import './App.css';
import Navbar from './components/Navbar';
import News from './components/News';
import NewsItem from './components/NewsItem';
function App() {
return (
<div>
<Navbar />
<News />
</div>
);
}
export default App;
// ----- News.js
import React, { Component } from 'react'
import NewsItem from './NewsItem';
export class News extends Component {
render() {
return (
<div>
<NewsItem />
</div>
)
}
}
export default News
//----- NewsItem.js
import React, { Component } from 'react'
export class NewsItem extends Component {
render() {
return (
<div>
NewItem component
</div>
)
}
}
export default NewsItemI am new to react and trying to learn the basics.I tried to resolve the issue but couldn't find out the actual cause. I tried to search same issue over the internet but can't find any. All though the error msg is same but situation is different.
As you can see the NewsItem.js component is passed to News.js. Is it ok to pass a class component to another class component as a return type?
I'm getting the error as shown in img.
Try to remove export before defining the class
class News extends Component ...
class NewsItem extends Component ...You are already default exporting it at the bottom